<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text">
        </div>
    </div> 

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Username')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-username" data-rule="required" class="form-control" name="row[username]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Nickname')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-nickname" data-rule="required" class="form-control" name="row[nickname]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Password')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-password" data-rule="required" class="form-control" name="row[password]" type="text" value="">
        </div>
    </div>
    
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Avatar')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-avatar"  data-rule="required" class="form-control" size="50" name="row[avatar]" type="text" value="">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="plupload-avatar" class="btn btn-danger plupload" data-input-id="c-avatar" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-avatar"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-avatar" class="btn btn-primary fachoose" data-input-id="c-avatar" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-avatar"></span>
            </div>
            <ul class="row list-inline plupload-preview" id="p-avatar"></ul>
        </div>
    </div>
    
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
                {foreach name="statusList" item="vo"}
                    <label for="c-status_{$key}">
                        <input type="radio" name="row[status]" id="c-status_{$key}" value="{$key}" {eq name="$key" value="0"}checked{/eq}> {$vo}
                    </label>
                {/foreach}
            </div>
        </div>
    </div>
    <div class="form-group text-center">
        <label class="control-label col-xs-12 col-sm-2">{:__('地址')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-address" data-rule="required" class="form-control" name="row[address]" type="text" value="">
            <input id="c-lng" class="form-control" name="row[lng]" type="hidden" value="">
            <input id="c-lat" class="form-control" name="row[lat]" type="hidden" value="">
            <div id="baiduMap" style="height: 300px; width: 100%; margin: 0 auto;"></div> 
        </div>
    </div>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KT926SMZaaQytozZxScbKduVYCnmeCyb"></script>

<script type="text/javascript"> 
    var map = new BMap.Map("baiduMap");
    var geolocation = new BMap.Geolocation();
    //获取用户定位
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            // 创建地图实例  
            var point = new BMap.Point(r.point.lng, r.point.lat);
            map.centerAndZoom(point, 15); 
        }
        else {
            var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
            map.centerAndZoom(point, 15); 
        }    
        var marker = new BMap.Marker(point);        // 创建标注    
        map.addOverlay(marker);                     // 将标注添加到地图中    
    });


    //单击获取点击的经纬度
    map.addEventListener("click",function(e){
        //通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度     
        var pt = e.point;
        
        deletePoint();

        var geoc = new BMap.Geocoder();
        geoc.getLocation(pt, function(rs){
            //addressComponents对象可以获取到详细的地址信息
            var addComp = rs.addressComponents;
            var site = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
            //将对应的HTML元素设置值
            $("#c-address").val(site);
            $("#c-lng").val(pt.lng);
            $("#c-lat").val(pt.lat);
            var point = new BMap.Point(pt.lng, pt.lat);  // 创建点坐标 
            var marker = new BMap.Marker(point);        // 创建标注    
            map.addOverlay(marker);                     // 将标注添加到地图中 
        }); 
    });

    function deletePoint(){
        var allOverlay = map.getOverlays();
        for (var i = 0; i < allOverlay.length -1; i++){
            map.removeOverlay(allOverlay[i]);
        }
    }

</script>